import {NCard, NTag, NSpace} from "naive-ui"
import {computed, defineNuxtComponent, useXianLuStore, ref} from "#imports"

export default defineNuxtComponent({
    name: "矿石",
    props:{
        data:{
            type: Object,
            default: ()=>({})
        },
    },
    setup(props) {
        const store = useXianLuStore()
        const kuangshiInfo = ref(null)
        const lingshiInfo = ref(null)
        
        // 挖矿消息
        const miningMessage = ref('')
        const showMiningMessage = ref(false)
        
        // 如果是矿石或灵石，获取详细信息
        if (props.data.type === 'kuangshi' && props.data.content) {
            // 导入矿石列表
            import('~/utils/kuangshi').then(({ kuangshiList }) => {
                // 根据等级筛选矿石
                const availableKuangshi = kuangshiList.filter(ks => ks.level === props.data.content.level)
                if (availableKuangshi.length > 0) {
                    // 随机选择一种矿石作为显示
                    const randomIndex = Math.floor(Math.random() * availableKuangshi.length)
                    kuangshiInfo.value = availableKuangshi[randomIndex]
                }
            })
        } else if (props.data.type === 'lingshi' && props.data.content) {
            // 导入灵石列表
            import('~/utils/lingshi').then(({ lingshiList }) => {
                // 根据等级筛选灵石
                const availableLingshi = lingshiList.filter(ls => ls.level === props.data.content.level)
                if (availableLingshi.length > 0) {
                    // 随机选择一种灵石作为显示
                    const randomIndex = Math.floor(Math.random() * availableLingshi.length)
                    lingshiInfo.value = availableLingshi[randomIndex]
                }
            })
        }
        
        const status = computed(()=>{
            if(store.nextDugCaveCoord.x === props.data.coord?.x && 
               store.nextDugCaveCoord.y === props.data.coord?.y &&
               store.nextDugCaveCoord.z === props.data.coord?.z){
                // 首先判断是不是用户所在的位置
                return "人物"
            }
            const isDug = store.dugCaveCoordList.find((el:any)=>
                el.x === props.data.coord?.x && 
                el.y === props.data.coord?.y && 
                el.z === props.data.coord?.z
            )
            if(isDug){
                // 判断是不是已经挖过的地方
                return "已挖"
            }
            // 都是可以开挖的矿石
            return "可开挖"
        })
        
        // 获取矿石/灵石颜色
        const getItemColor = (type, level) => {
            if (type === 'lingshi') {
                // 灵石颜色根据等级变化
                switch(level) {
                    case 1: return '#4caf50' // 低级灵石 - 绿色
                    case 2: return '#2196f3' // 中级灵石 - 蓝色
                    case 3: return '#9c27b0' // 高级灵石 - 紫色
                    case 4: return '#ff9800' // 极品灵石 - 橙色
                    default: return '#4caf50'
                }
            } else {
                // 矿石颜色根据等级变化
                if (level <= 3) return '#9e9e9e' // 低级矿石 - 灰色
                else if (level <= 6) return '#2196f3' // 中级矿石 - 蓝色
                else if (level <= 9) return '#9c27b0' // 高级矿石 - 紫色
                else return '#ff9800' // 顶级矿石 - 橙色
            }
        }
        
        // 判断是否可挖掘（只有相邻格子可以挖掘）
        const canDig = computed(() => {
            if (status.value !== "可开挖") return false
            
            // 检查是否是玩家周围的格子（上下左右）
            const dx = Math.abs(props.data.coord.x - store.nextDugCaveCoord.x)
            const dy = Math.abs(props.data.coord.y - store.nextDugCaveCoord.y)
            const dz = props.data.coord.z - store.nextDugCaveCoord.z
            
            // 只有同一层的上下左右格子可以挖掘
            return dz === 0 && ((dx === 1 && dy === 0) || (dx === 0 && dy === 1))
        })
        
        // 处理点击事件
        const handleClick = () => {
            // 检查木材是否足够
            if (!store.getMuTouCount >= 10) {
                // 通知父组件显示消息
                const event = new CustomEvent('mining-message', {
                    detail: {
                        message: '木材不足，需要10个木材',
                        success: false
                    },
                    bubbles: true,
                    composed: true
                })
                document.dispatchEvent(event)
                return
            }
            
            if (status.value === "可开挖" && canDig.value) {
                // 计算方向
                const dx = props.data.coord.x - store.nextDugCaveCoord.x
                const dy = props.data.coord.y - store.nextDugCaveCoord.y
                
                let direction = 'up'
                if (dx === 1) direction = 'right'
                else if (dx === -1) direction = 'left'
                else if (dy === 1) direction = 'down'
                else if (dy === -1) direction = 'up'
                
                // 调用挖矿方法
                const result = store.digCave(direction)
                
                // 通知父组件显示消息
                const event = new CustomEvent('mining-message', {
                    detail: {
                        message: result.message,
                        success: result.success
                    },
                    bubbles: true,
                    composed: true
                })
                document.dispatchEvent(event)
            } else if (status.value === "人物") {
                // 如果点击的是玩家所在位置，向下挖掘
                const result = store.digDown()
                
                // 通知父组件显示消息
                const event = new CustomEvent('mining-message', {
                    detail: {
                        message: result.message,
                        success: result.success
                    },
                    bubbles: true,
                    composed: true
                })
                document.dispatchEvent(event)
            }
        }
        
        return () => {
            const cardProps = {
                bordered: false,
                class: `w-120px h-120px ${canDig.value ? 'cursor-pointer hover:shadow-md' : ''}`,
                onClick: handleClick
            }
            
            switch (status.value) {
                case "人物":
                    return <NCard title={"当前位置"} {...cardProps} class="w-120px h-120px cursor-pointer hover:shadow-md">
                        <NSpace vertical>
                            <div>当前位置</div>
                            <div>深度: {props.data.coord?.z}层</div>
                            <NTag type="success">点击向下挖掘</NTag>
                        </NSpace>
                    </NCard>
                
                case "已挖":
                    if (props.data.type === 'kuangshi' && kuangshiInfo.value) {
                        return <NCard 
                            title={kuangshiInfo.value.name} 
                            {...cardProps}
                            headerStyle={{
                                color: getItemColor('kuangshi', kuangshiInfo.value.level)
                            }}
                        >
                            <NSpace vertical size="small">
                                <div class="text-xs">{kuangshiInfo.value.description}</div>
                                <div>
                                    <NTag size="small" type="info">等级: {kuangshiInfo.value.level}</NTag>
                                </div>
                                <div>
                                    <NTag size="small" type="success">矿石</NTag>
                                </div>
                            </NSpace>
                        </NCard>
                    } else if (props.data.type === 'lingshi' && lingshiInfo.value) {
                        return <NCard 
                            title={lingshiInfo.value.name} 
                            {...cardProps}
                            headerStyle={{
                                color: getItemColor('lingshi', lingshiInfo.value.level)
                            }}
                        >
                            <NSpace vertical size="small">
                                <div class="text-xs">{lingshiInfo.value.description}</div>
                                <div>
                                    <NTag size="small" type="info">等级: {lingshiInfo.value.level}</NTag>
                                </div>
                                <div>
                                    <NTag size="small" type="warning">灵石</NTag>
                                </div>
                            </NSpace>
                        </NCard>
                    } else {
                        return <NCard title={"已挖"} {...cardProps}>
                            <NSpace vertical>
                                <div>已挖掘</div>
                                <div>深度: {props.data.coord?.z}层</div>
                            </NSpace>
                        </NCard>
                    }
                
                case "可开挖":
                    return <NCard 
                        title={"可开挖"} 
                        {...cardProps} 
                        class={`w-120px h-120px ${canDig.value ? 'cursor-pointer hover:shadow-md border-2 border-green-400' : 'opacity-50'}`}
                    >
                        <NSpace vertical>
                            <div>可开挖区域</div>
                            <div>消耗10木材</div>
                            {canDig.value ? <NTag type="success">可点击挖掘</NTag> : <NTag type="error">不可挖掘</NTag>}
                        </NSpace>
                    </NCard>
                
                default:
                    return null
            }
        }
    }
})